<template>
  <view v-if="loaded" class="special-work-container" style="padding-bottom: 0">
    <view class="special-work__tabs">
      <view class="special-work__tab-item" :class="{ active: tab === 'basic' }" @click="tab = 'basic'">基础信息</view>
      <view class="special-work__tab-item" :class="{ active: tab === 'project' }" @click="tab = 'project'">
        项目详情
      </view>
      <view
        v-if="type === 'approve'"
        class="special-work__tab-item"
        :class="{ active: tab === 'approve' }"
        @click="tab = 'approve'"
      >
        项目审批
      </view>
    </view>
    <basic-info v-show="tab === 'basic'" :detail="detail" />
    <ticket-info v-show="tab === 'project'" :tickets="detail.specialWorkList" />
    <view v-show="tab === 'approve'" class="background-white">
      <cu-cell-group>
        <uni-forms-item name="approve">
          <cu-cell-select
            v-model="approveFormState.approve"
            :list="dictReviewResult"
            labelKey="label"
            valueKey="value"
            title="审查意见"
            placeholder="请选择审查意见"
            link
            required
          ></cu-cell-select>
        </uni-forms-item>
        <uni-forms-item v-if="approveFormState.approve === 4" name="commanderLabel">
          <cu-cell
            title="上报审核人"
            required
            link
            placeholder="请选择上报审核人"
            :description="approveFormState.userName"
            @click="showUserSelector()"
          ></cu-cell>
        </uni-forms-item>

        <view class="submit-btn">
          <button class="u-button" type="primary" :ripple="true" @click="handleSubmit">提交</button>
        </view>
      </cu-cell-group>
    </view>

    <cu-dept-user-select
      ref="deptUserSelectRef"
      :checkList="checkList"
      :expand-fields="{ postType: 2 }"
      @change="onDeptUserChange"
    ></cu-dept-user-select>
  </view>
</template>

<script>
import BasicInfo from './components/BasicInfo.vue'
import TicketInfo from './components/TicketInfo.vue'
import { approve, changeAuditUser, getWorkProjectListDetail } from '@/api/spw/project'
import CuCellSelect from '@/components/cu-cell/cu-cell-select.vue'
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuDeptUserSelect from '@/components/cu-dept-user-select/cu-dept-user-select.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
export default {
  components: {
    CuCell,
    CuDeptUserSelect,
    CuCellGroup,
    CuCellSelect,
    BasicInfo,
    TicketInfo
  },
  async onLoad(option) {
    const { projectInfoId, type } = option
    this.projectInfoId = projectInfoId
    this.type = type
    if (type === 'approve') {
      this.tab = 'approve'
      uni.setNavigationBarTitle({
        title: '作业项目审批'
      })
    }
    this.getDetail()
  },
  data() {
    return {
      type: '',
      projectInfoId: '',
      loaded: false,
      detail: {},
      tab: 'basic',
      approveFormState: {
        approve: '',
        userId: '',
        userName: ''
      },
      checkList: [],
      dictReviewResult: [
        {
          label: '通过',
          value: 2
        },
        {
          label: '不通过',
          value: 3
        },
        {
          label: '上报审批',
          value: 4
        }
      ]
    }
  },

  methods: {
    onDeptUserChange(val) {
      if (!val) {
        return
      }
      this.checkList = val
      this.approveFormState.userId = val[0].userId
      this.approveFormState.userName = val[0].name
    },
    showUserSelector() {
      this.$refs.deptUserSelectRef.open()
    },
    async handleApprove() {
      try {
        this.loading = true
        if (this.approveFormState.approve === 4) {
          await changeAuditUser(this.projectInfoId, this.approveFormState.userId, this.approveFormState.userName)
          this.$modal.showToast('上报成功')
        } else {
          await approve(this.projectInfoId, this.approveFormState.approve)
          this.$modal.showToast('审批成功')
        }
        setTimeout(() => {
          const eventChannel = this.getOpenerEventChannel()
          eventChannel.emit('callback:success', {
            data: true
          })
          uni.navigateBack()
        }, 1500)
      } catch (err) {
        this.loading = false
      }
    },
    handleSubmit() {
      if (this.loading) {
        return
      }
      if (!this.approveFormState.approve) {
        uni.showToast({
          title: '请选择审批意见',
          icon: 'none'
        })
        return
      }
      if (this.approveFormState.approve === 4 && !this.approveFormState.userId) {
        uni.showToast({
          title: '请选择上报审核人',
          icon: 'none'
        })
        return
      }
      this.handleApprove()
    },
    getDetail() {
      getWorkProjectListDetail(this.projectInfoId).then((res) => {
        this.detail = res.data
        this.loaded = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../detail/style/style.scss';
.submit-btn {
  background: #fff;
  padding: 20px;
  .u-button {
    width: 100%;
    background-color: #454a5e;
    color: #fff;
  }
}
</style>
